<template>
  <div>
    <div class="tab-header">
      <el-button v-if="!readonly" type="primary" @click="openAddDialog">添加奖惩记录</el-button>
    </div>
    <el-table :data="records" style="width: 100%" v-loading="loading" size="small">
      <el-table-column prop="type" label="奖惩类型" width="120">
        <template #default="scope">
          <el-tag :type="scope.row.type === '奖励' ? 'success' : (scope.row.type === '惩罚' ? 'danger' : 'info')">
            {{ scope.row.type }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="reason" label="奖惩原因" min-width="200" />
      <el-table-column prop="date" label="奖惩时间" width="120" />
      <el-table-column label="操作" width="220" v-if="!readonly">
        <template #default="scope">
          <el-button size="small" type="warning" @click="openDialog('view', scope.row)">查看</el-button>
          <el-button size="small" type="primary" @click="openDialog('edit', scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="showAddDialog" title="添加奖惩记录" width="80%" :style="{maxWidth: '1200px'}">
      <el-form :model="addForm" :rules="addRules" ref="addFormRef" label-width="90px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="奖惩类型" prop="type">
              <el-select v-model="addForm.type" placeholder="请选择类型" style="width: 100%">
                <el-option label="奖励" value="奖励" />
                <el-option label="惩罚" value="惩罚" />
                <el-option label="警告" value="警告" />
                <el-option label="通报表扬" value="通报表扬" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="奖惩时间" prop="date">
              <el-date-picker v-model="addForm.date" type="date" value-format="YYYY-MM-DD" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="奖惩原因" prop="reason">
              <el-input v-model="addForm.reason" type="textarea" :rows="3" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showAddDialog = false">取消</el-button>
          <el-button type="primary" @click="handleAddSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑/查看奖惩记录弹窗 -->
    <el-dialog
      v-model="showEditDialog"
      :title="dialogMode === 'edit' ? '编辑奖惩记录' : '查看奖惩记录'"
      width="80%"
      :style="{maxWidth: '1200px'}"
    >
      <el-form :model="editForm" ref="editFormRef" label-width="90px" :disabled="dialogMode === 'view'">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="奖惩类型" prop="type">
              <el-select v-model="editForm.type" placeholder="请选择类型" style="width: 100%" :disabled="dialogMode === 'view'">
                <el-option label="奖励" value="奖励" />
                <el-option label="惩罚" value="惩罚" />
                <el-option label="警告" value="警告" />
                <el-option label="通报表扬" value="通报表扬" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="奖惩时间" prop="date">
              <el-date-picker v-model="editForm.date" type="date" value-format="YYYY-MM-DD" style="width: 100%" :disabled="dialogMode === 'view'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="奖惩原因" prop="reason">
              <el-input v-model="editForm.reason" type="textarea" :rows="3" :disabled="dialogMode === 'view'" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showEditDialog = false">取消</el-button>
          <el-button v-if="dialogMode === 'edit'" type="primary" @click="handleEditSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { getRewardPunishments, addRewardPunishment, deleteRewardPunishment } from '@/api/rewardPunishmentApi'

const props = defineProps({
  employeeId: { type: Number, required: true },
  readonly: { type: Boolean, default: false }
})

const records = ref([])
const loading = ref(false)
const showAddDialog = ref(false)
const addForm = ref({ type: '', reason: '', date: '' })
const addFormRef = ref(null)
const addRules = {
  type: [{ required: true, message: '请选择奖惩类型', trigger: 'change' }],
  reason: [{ required: true, message: '请输入奖惩原因', trigger: 'blur' }],
  date: [{ required: true, message: '请选择奖惩时间', trigger: 'change' }]
}

const showEditDialog = ref(false)
const editForm = ref({ type: '', reason: '', date: '' })
const editFormRef = ref(null)
const dialogMode = ref('view') // 'view' | 'edit'

function loadData() {
  if (!props.employeeId) return
  loading.value = true
  getRewardPunishments(props.employeeId).then(res => {
    records.value = res.data
  }).finally(() => loading.value = false)
}

function handleDelete(row) {
  deleteRewardPunishment(props.employeeId, row.id).then(() => {
    ElMessage.success('删除成功')
    loadData()
  })
}

function openAddDialog() {
  addForm.value = { type: '', reason: '', date: '' }
  showAddDialog.value = true
}

async function handleAddSubmit() {
  addFormRef.value.validate(async valid => {
    if (!valid) return
    await addRewardPunishment(props.employeeId, addForm.value)
    ElMessage.success('添加成功')
    showAddDialog.value = false
    loadData()
  })
}

function openDialog(mode, row) {
  dialogMode.value = mode
  editForm.value = { ...row }
  showEditDialog.value = true
}

async function handleEditSubmit() {
  editFormRef.value.validate(async valid => {
    if (!valid) return
    await addRewardPunishment(props.employeeId, editForm.value)
    ElMessage.success('修改成功')
    showEditDialog.value = false
    loadData()
  })
}

watch(() => props.employeeId, loadData, { immediate: true })
</script>

<style scoped>
.tab-header {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}
</style> 